// record

@import "../../mixins/pesudo-position";

.record {
  overflow: hidden;

  &.stepanel {
    padding: 37px 44px 30px 20px;
  }

  .stepanel__arrow {
    left: 843px;
  }

  .recorder {
    float: left;
    margin-right: 22px;
  }

  &__guide {
    overflow: hidden;

    .guide {
      &__notice {
        margin-top: 7px;
        margin-bottom: 20px;
        padding: 7px 21px 5px 18px;
        background-color: #FFF7CC;
        border-radius: 4px;
        border: 1px solid #FFD00C;
        font-size: 14px;
        color: #FF8A00;
        line-height: (20 / 14);
      }

      &__terms {
        margin-bottom: 16px;
        padding-left: 46px;
        list-style: none;

        .terms__item {
          position: relative;
          padding-bottom: 20px;
          font-size: 16px;
          color: #000;
          line-height: (24 / 16);

          &:after {
            position: absolute;
            content: '';
            width: 2px;
            height: 100%;
            top: 0;
            left: -(9px + 24px / 2);
            background-color: #50E3C2;
            z-index: 0;
          }

          &:last-child {
            padding-bottom: 0;
            &:after {
              content: none;
            }
          }
        }

        .terms__no {
          position: absolute;
          width: 24px;
          height: 24px;
          top: 0;
          left: -(9px + 24px);
          text-align: center;
          line-height: 24px;
          color: #FFFFFF;
          border-radius: 24px;
          background-color: #50E3C2;
          z-index: 1;
        }
      }

      &__quote {
        position: relative;
        margin-bottom: 46px;
        padding: 0;
        padding-left: 46px;
        border: 0;
        font-size: 14px;
        color: #4A4A4A;

        &:before {
          @include positionAbsolute();
          width: 18px;
          height: 15px;
          left: 23px;
          top: 0;
          background: url('~images/icons/open-quote.png') center / 100% no-repeat;
        }

        .quote__para {
          margin-top: 0;
          margin-bottom: 10px;

          .warning {
            color: #F5A623;
          }
        }

        .quote__close {
          position: relative;
          display: inline-block;
          width: 14px;
          height: 13px;
          margin-left: 6px;

          &:after {
            @include positionAbsolute();
            width: 100%;
            height: 100%;
            left: 0;
            top: -6px;
            background: url('~images/icons/close-quote.png') center / 100% no-repeat;
          }
        }
      }

      &__submit {
        margin-left: 28px;
        padding-left: 54px;
        padding-right: 54px;
      }
    }
  }
}